<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>



</head>
<body>

  <div class="container">
      <h2><span>距离新年</span>2023</h2>
      <div class="countdown">
      <div id="day"> </div>
      <div id="hour"></div>
      <div id="minute"></div>
      <div id="second"></div>
    </div>
  </div>

  
  <script>

    const countDate = new Date('Jan 1,2023 00:00:00').getTime();

  function newYear(){
    const now = new Date().getTime();
    const gap = countDate - now;
    console.log('gap:'+gap);
    const seacond = 1000;
    const minute = seacond * 60;
    const hour = minute * 60;
    const day = hour * 24;

    const d= Math.floor(gap/(day))
    const h= Math.floor((gap % (day))/(hour))
    const m= Math.floor((gap % (hour))/(minute))
    const w= Math.floor((gap % (minute))/(seacond))

    document.getElementById('day').innerText=d
    document.getElementById('hour').innerText=h
    document.getElementById('minute').innerText=m
    document.getElementById('second').innerText=w

  }

  setInterval(function(){
    newYear();
  },1000)

</script>

</body>
</html>